<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #ul1{
           background:green;
       }
        #ul2{
            background:yellow;
        }
    </style>
    <script>
        window.onload=function(){
          var oUl1=document.getElementById('ul1');
          var oUl2=document.getElementById('ul2');
          var oBtn=document.getElementById('btn');
          oBtn.onclick=function(){
            var oLi=oUl1.children[0];
            oUl1.removeChild(oLi);  //可以不要这行代码
            oUl2.appendChild(oLi); //1.先把元素从原有父级上删掉 2.添加到新的父级上
          };
        };

    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<input type="button" id="btn" value="移动">
<ul id="ul2"></ul>
</body>
</html>